<template>
  <div class="about">
    <div id="main" style="width: 600px; height: 400px"></div>
    <div id="main1" style="width: 600px; height: 400px"></div>
    <div id="main2" style="width: 600px; height: 400px"></div>
    <div id="main3" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive, nextTick } from "vue";
import TestChild from "@/components/testChild.vue";
import * as echarts from "echarts";
import $ from "jquery";

export default defineComponent({
  setup() {
    onMounted(() => {
      type EChartsOption = echarts.EChartsOption;

      var chartDom = document.getElementById("main")!;
      var chartDom1 = document.getElementById("main1")!;
      var chartDom2 = document.getElementById("main2")!;
      var myChart = echarts.init(chartDom,chartDom1,chartDom2);
      var option: EChartsOption;

      option = {
        title: {
          text: "Referer of a Website",
          subtext: "Fake Data",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    });
    return {};
  },
});
</script>
